const indexSmallSlidesShow = () => {
    let indexSmallSlidesShowInterval
    let i = 0;
    const imgs = document.getElementsByClassName('smallSlidesShowImg');
    const li = document.getElementsByClassName('smallSlidesShowLi');

    imgs[0].style.opacity = "1";
    li[0].classList.add('smallSlidesShowLiWhite');

    function intervalCoat() {
        indexSmallSlidesShowInterval = setInterval(
            function () {
                for (let j = 0; j < imgs.length; j++) {
                    imgs[j].style.opacity = "0";
                    li[j].classList.remove('smallSlidesShowLiWhite');
                }
                if (i < imgs.length) {
                    imgs[i].style.opacity = "1";
                    li[i].classList.add('smallSlidesShowLiWhite');
                    i++;

                } else if (i = imgs.length) {
                    i = 0;
                    imgs[i].style.opacity = "1";
                    li[i].classList.add('smallSlidesShowLiWhite');
                    i++;
                }
            }
            , 3000)
    }
    intervalCoat();

    const imgsBox = document.querySelector('.smallSlidesShow');
    imgsBox.addEventListener('mouseover', function () {
        clearInterval(indexSmallSlidesShowInterval);
    });
    imgsBox.addEventListener('mouseout', function () {
        intervalCoat();
    });

    const liList = document.querySelectorAll('.smallSlidesShowLi');
    Array.from(liList).forEach(
        function (eachLi) {
            eachLi.addEventListener('click', function () {
                clearInterval(indexSmallSlidesShowInterval);
                for (let j = 0; j < imgs.length; j++) {
                    imgs[j].style.opacity = "0";
                    li[j].classList.remove('smallSlidesShowLiWhite');
                }
                const index = Array.from(liList).indexOf(eachLi);
                i = index;
                imgs[index].style.opacity = "1";
                li[index].classList.add('smallSlidesShowLiWhite');
                console.log(`被点击的li在所有同名li中的索引是：${index}`);
            })
        }
    );

    if (window.location.hash != '#/index') {
        clearInterval(indexSmallSlidesShowInterval);
    }
};
document.addEventListener('DOMContentLoaded', function () {
    indexSmallSlidesShow();
});
// export default { indexSmallSlidesShow }